<template>
  <div>
    <div class="header" style="height: 32px">
      <div>
        <el-button
          class="el_button"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          style="margin-left: 15px"
          @click="onAdd"
        >
          新增
        </el-button>
        <el-button
          class="el_button"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          style="margin-left: 15px"
          @click="onBatchDelete"
        >
          移除
        </el-button>
        <span v-if="dataList && dataList.length"
          >共 {{ dataList.length }} 条</span
        >
      </div>
    </div>
    <div class="content">
      <el-table
        :data="dataList"
        class="table"
        ref="refTable"
        :height="dataList && dataList.length ? '200px' : '100px'"
        :header-cell-style="headerStyle"
        row-key="id"
        @selection-change="batchSelect"
      >
        <el-table-column
          align="center"
          type="selection"
          :reserve-selection="true"
          width="45"
        ></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
          height="30"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="imei"
          label="设备编码"
          min-width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="productName"
          label="设备类型"
          min-width="150"
          show-overflow-tooltip
        ></el-table-column>
        <!--   v-if="pageType === 'normal'" -->
        <el-table-column
          align="center"
          prop="spaceName"
          label="安装点"
          min-width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="online"
          min-width="120"
          label="在线状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.online == 1" type="success">在线</el-tag>
            <el-tag v-else type="warning">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="90">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="移除"
              placement="bottom"
            >
              <i
                @click="onDelete(scope.row.id)"
                class="iconfont shanchu tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <TableSelect
      ref="refTableSelect"
      :pageType="pageType"
      :orgId="orgId"
      :selectList="dataList"
      @submitTable="submitTable"
    />
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import TableSelect from "./TableSelect";
export default {
  props: {
    pageType: {
      type: String,
    },
    orgId: {
      type: String,
    },
  },
  mixins: [tableStyleMixin],
  components: { TableSelect },
  data() {
    return {
      dataList: [],
      selectList: [],
    };
  },
  watch: {},
  methods: {
    batchSelect(arr) {
      // console.log("batchSelect", arr);
      this.selectList = arr;
    },
    async onBatchDelete() {
      if (!(this.selectList && this.selectList.length)) {
        this.$modal.notifyWarning("请选择要移除的设备");
        return;
      }
      const result = await this.$confirm(
        "此操作将移除选择的设备, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;

      const { dataList, selectList } = this;
      const idsSet = new Set(selectList.map((item) => item.id));
      this.dataList = dataList.filter((item) => !idsSet.has(item.id));

      this.selectList = [];
      this.$refs.refTable.clearSelection();
      this.$emit("submitTable", {
        data: this.dataList,
        pageType: this.pageType,
      });
    },
    onAdd() {
      if (!this.orgId) return this.$modal.notifyWarning("请先选择所属机构");
      this.$refs.refTableSelect.dialogVisible = true;
    },
    async onDelete(id) {
      // const result = await this.$confirm(
      //   "此操作将移除该设备, 是否继续?",
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // ).catch(() => {});
      // if (result !== "confirm") return;
      const { dataList } = this;
      this.dataList.splice(
        dataList.findIndex((item) => item.id === id),
        1
      );
      1;
      this.$emit("submitTable", {
        data: this.dataList,
        pageType: this.pageType,
      });
    },
    submitTable(data) {
      this.dataList = data;
      this.$emit("submitTable", { data, pageType: this.pageType });
    },
    clearData() {
      this.dataList = [];
      this.selectList = [];
      this.$refs.refTable.clearSelection();
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
.header {
  span {
    color: @primaryTxtcolor;
    margin-left: 20px;
  }
}

.tableBtnIcon { 
  cursor: pointer;
}
</style>